<!-- 分组管理 -->
<template>
  <div class="app-container">
      <div class="left-part">
          <SliderAside 
              @item-click="handleItemClick"
          />
      </div>
      <div class="right-part">
          <div class="group-wrapper">
              <Table 
                :selected-value="selectedValue"
                :selected-name="selectedName"
                ref="timeChargeComponent"
              />
          </div>
      </div>
  </div>
</template>

<script>
import SliderAside from './components/sliderAside/silderAside.vue'
import Table from './components/table/index.vue'
export default {
  components: {
      SliderAside,
      Table
  },
  data() {
      return {
          selectedValue: '', // 接收到的value
          selectedName: '', // 接收到的name
      }
  },
  methods: {
      handleItemClick(value, name) {
          this.selectedValue = value // 更新selectedValue的值
          this.selectedName = name // 更新selectedName的值
      },
      getTable(){
          this.$refs.timeChargeComponent.getElectricityRateTable()
      }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
      display: flex;
      width: 100%;
      height: 100%;

      .left-part{
          min-width: 285px;
          width: 20%;
          height: 100%;
          margin-right: 20px;
          border-radius: 10px;
      }

      .right-part{
          min-width: 725px;
          flex: 1;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          
          .group-wrapper {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 100%;
      
              .group {
                  margin-bottom: 20px;
              }
          }
      }
      
  }
</style>